React ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ๊ตฌํํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ถฉ๋์ ๋ฐฉ์งํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ์ฐ์ํ ์ค๋ฅ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณด์ธ์. ๋ชจ๋ฒ ์ฌ๋ก, ๊ณ ๊ธ ๊ธฐ์ ๋ฐ ์ค์ ์์ ๋ฅผ ํ์ํฉ๋๋ค.
React ์ค๋ฅ ๊ฒฝ๊ณ(Error Boundaries): ๊ฐ๋ ฅํ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ์ํ ์ข ํฉ ๊ฐ์ด๋
ํ๋ ์น ๊ฐ๋ฐ์ ์ธ๊ณ์์ ๋ถ๋๋ฝ๊ณ ์์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ฌด์๋ณด๋ค ์ค์ํฉ๋๋ค. ์ฒ๋ฆฌ๋์ง ์์ ๋จ์ผ ์ค๋ฅ๋ ์ ์ฒด React ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ด์์ผ ์ฌ์ฉ์๋ฅผ ์ข์ ์ํค๊ณ ์ ์ฌ์ ์ผ๋ก ๊ท์คํ ๋ฐ์ดํฐ๋ฅผ ์๊ฒ ํ ์ ์์ต๋๋ค. React ์ค๋ฅ ๊ฒฝ๊ณ(Error Boundaries)๋ ์ด๋ฌํ ์ค๋ฅ๋ฅผ ์ฐ์ํ๊ฒ ์ฒ๋ฆฌํ๊ณ , ์น๋ช ์ ์ธ ์ถฉ๋์ ๋ฐฉ์งํ๋ฉฐ, ๋ ํ๋ ฅ์ ์ด๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ฐ์ด๋๋ React ์ค๋ฅ ๊ฒฝ๊ณ์ ๋ชฉ์ , ๊ตฌํ, ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ๊ณ ๊ธ ๊ธฐ์ ์ ๋ค๋ฃจ๋ ํฌ๊ด์ ์ธ ๊ฐ์๋ฅผ ์ ๊ณตํฉ๋๋ค.
React ์ค๋ฅ ๊ฒฝ๊ณ๋ ๋ฌด์์ธ๊ฐ์?
์ค๋ฅ ๊ฒฝ๊ณ(Error Boundaries)๋ ์์ ์ปดํฌ๋ํธ ํธ๋ฆฌ ์ด๋์์๋ JavaScript ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ์ฌ ํด๋น ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ๊ณ , ์ถฉ๋์ด ๋ฐ์ํ ์ปดํฌ๋ํธ ํธ๋ฆฌ ๋์ ํด๋ฐฑ(fallback) UI๋ฅผ ํ์ํ๋ React ์ปดํฌ๋ํธ์ ๋๋ค. ์ด๋ ์์ ๋ง ์ญํ ์ ํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ ๋ถ๋ถ์์ ๋ฐ์ํ ์ค๋ฅ๊ฐ ์ ์ฒด UI๋ฅผ ๋ค์ด์ํค๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. React 16์ ๋์ ๋ ์ค๋ฅ ๊ฒฝ๊ณ๋ ์ด์ ์ ๋ ๊ฐ๋ ฅํ๋ ์ค๋ฅ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ ๋์ฒดํ์ต๋๋ค.
์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ React ์ปดํฌ๋ํธ๋ฅผ ์ํ `try...catch` ๋ธ๋ก์ด๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค. ํ์ง๋ง `try...catch`์ ๋ฌ๋ฆฌ ์ปดํฌ๋ํธ์ ๋ํด ์๋ํ๋ฉฐ, ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์ ๊ฑธ์ณ ์ ์ธ์ ์ด๊ณ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋ฐฉ์์ผ๋ก ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ ๋ฌด์์ธ๊ฐ์?
์ค๋ฅ ๊ฒฝ๊ณ๋ ์ฌ๋ฌ ๊ฐ์ง ์ค์ํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ์ ํ๋ฆฌ์ผ์ด์ ์ถฉ๋ ๋ฐฉ์ง: ๊ฐ์ฅ ํฐ ์ด์ ์ ๋จ์ผ ์ปดํฌ๋ํธ ์ค๋ฅ๊ฐ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ด์ํค๋ ๊ฒ์ ๋ฐฉ์งํ๋ ๊ฒ์ ๋๋ค. ๋น ํ๋ฉด์ด๋ ๋์์ด ๋์ง ์๋ ์ค๋ฅ ๋ฉ์์ง ๋์ , ์ฌ์ฉ์๋ ์ฐ์ํ ํด๋ฐฑ UI๋ฅผ ๋ณด๊ฒ ๋ฉ๋๋ค.
- ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ : ํด๋ฐฑ UI๋ฅผ ํ์ํจ์ผ๋ก์จ, ์ค๋ฅ ๊ฒฝ๊ณ๋ ์ฌ์ฉ์๊ฐ ์ฌ์ ํ ์ ์์ ์ผ๋ก ์๋ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ๊ณ์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ๊ฑฐ์ฌ๋ฆฌ๊ณ ๋ต๋ตํ ๊ฒฝํ์ ํผํ๊ฒ ํฉ๋๋ค.
- ์ค๋ฅ ๊ฒฉ๋ฆฌ: ์ค๋ฅ ๊ฒฝ๊ณ๋ ์ค๋ฅ๋ฅผ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ๋ถ๋ถ์ผ๋ก ๊ฒฉ๋ฆฌ์์ผ ๋ฌธ์ ์ ๊ทผ๋ณธ ์์ธ์ ๋ ์ฝ๊ฒ ์๋ณํ๊ณ ๋๋ฒ๊น ํ ์ ์๊ฒ ๋์์ค๋๋ค.
- ๊ฐํ๋ ๋ก๊น ๋ฐ ๋ชจ๋ํฐ๋ง: ์ค๋ฅ ๊ฒฝ๊ณ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ ์ค์ ์ง์ค์ ์ฅ์๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ์ ๋ณด๋ ๋ฌธ์ ๋ฅผ ์ฌ์ ์ ์๋ณํ๊ณ ์์ ํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด๋ Sentry, Rollbar ๋๋ Bugsnag์ ๊ฐ์ ๋ชจ๋ํฐ๋ง ์๋น์ค์ ์ฐ๋๋ ์ ์์ผ๋ฉฐ, ์ด๋ค ๋ชจ๋ ๊ธ๋ก๋ฒ ์ปค๋ฒ๋ฆฌ์ง๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
- ์ ํ๋ฆฌ์ผ์ด์ ์ํ ์ ์ง: ์ถฉ๋๋ก ์ธํด ๋ชจ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ํ๋ฅผ ์๋ ๋์ , ์ค๋ฅ ๊ฒฝ๊ณ๋ ๋๋จธ์ง ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ณ์ ์๋ํ๋๋ก ํ์ฌ ์ฌ์ฉ์์ ์งํ ์ํฉ๊ณผ ๋ฐ์ดํฐ๋ฅผ ๋ณด์กดํฉ๋๋ค.
์ค๋ฅ ๊ฒฝ๊ณ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ
์ค๋ฅ ๊ฒฝ๊ณ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๋ ค๋ฉด ๋ค์ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋ ์ค ํ๋ ๋๋ ๋ ๋ค๋ฅผ ๊ตฌํํ๋ ํด๋์ค ์ปดํฌ๋ํธ๋ฅผ ์ ์ํด์ผ ํฉ๋๋ค:
static getDerivedStateFromError(error): ์ด ์ ์ ๋ฉ์๋๋ ํ์ ์ปดํฌ๋ํธ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ํ์ ํธ์ถ๋ฉ๋๋ค. ๋ฐ์ํ ์ค๋ฅ๋ฅผ ์ธ์๋ก ๋ฐ์ผ๋ฉฐ, ํด๋ฐฑ UI๋ฅผ ๋ ๋๋งํ๊ธฐ ์ํด ์ํ๋ฅผ ์ ๋ฐ์ดํธํ ๊ฐ์ ๋ฐํํด์ผ ํฉ๋๋ค.componentDidCatch(error, info): ์ด ๋ฉ์๋๋ ํ์ ์ปดํฌ๋ํธ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ํ์ ํธ์ถ๋ฉ๋๋ค. ๋ฐ์ํ ์ค๋ฅ์ ์ค๋ฅ๋ฅผ ๋ฐ์์ํจ ์ปดํฌ๋ํธ์ ๋ํ ์ ๋ณด๊ฐ ํฌํจ๋info๊ฐ์ฒด๋ฅผ ๋ฐ์ต๋๋ค. ์ด ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ๊ฑฐ๋ ๋ค๋ฅธ ๋ถ์ ํจ๊ณผ๋ฅผ ์ํํ ์ ์์ต๋๋ค.
๋ค์์ ์ค๋ฅ ๊ฒฝ๊ณ ์ปดํฌ๋ํธ์ ๊ธฐ๋ณธ ์์ ์ ๋๋ค:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// ๋ค์ ๋ ๋๋ง์์ ํด๋ฐฑ UI๋ฅผ ํ์ํ๋๋ก state๋ฅผ ์
๋ฐ์ดํธํฉ๋๋ค.
return { hasError: true };
}
componentDidCatch(error, info) {
// ์์ "componentStack":
// in ComponentThatThrows (created by App)
// in App
console.error("์กํ ์ค๋ฅ: ", error, info.componentStack);
// ์ค๋ฅ๋ฅผ ์ค๋ฅ ๋ณด๊ณ ์๋น์ค์ ๊ธฐ๋กํ ์๋ ์์ต๋๋ค.
// logErrorToMyService(error, info.componentStack);
}
render() {
if (this.state.hasError) {
// ์ํ๋ ์ปค์คํ
ํด๋ฐฑ UI๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค.
return ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
;
}
return this.props.children;
}
}
์ค๋ช :
ErrorBoundary์ปดํฌ๋ํธ๋React.Component๋ฅผ ํ์ฅํ๋ ํด๋์ค ์ปดํฌ๋ํธ์ ๋๋ค.- ์์ฑ์๋ ์ํ๋ฅผ
hasError: false๋ก ์ด๊ธฐํํฉ๋๋ค. ์ด ํ๋๊ทธ๋ ํด๋ฐฑ UI๋ฅผ ๋ ๋๋งํ ์ง ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. static getDerivedStateFromError(error)๋ ๋ฐ์ํ ์ค๋ฅ๋ฅผ ๋ฐ๋ ์ ์ ๋ฉ์๋์ ๋๋ค. ์ํ๋ฅผhasError: true๋ก ์ ๋ฐ์ดํธํ์ฌ ํด๋ฐฑ UI ๋ ๋๋ง์ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.componentDidCatch(error, info)๋ ์ค๋ฅ์ ์ปดํฌ๋ํธ ์คํ์ ๋ํ ์ ๋ณด๊ฐ ํฌํจ๋info๊ฐ์ฒด๋ฅผ ๋ฐ๋ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋์ ๋๋ค. ์ฝ์์ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ํ๋ก๋์ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์ผ๋ฐ์ ์ผ๋ก ์ค๋ฅ ๋ณด๊ณ ์๋น์ค์ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํฉ๋๋ค.render()๋ฉ์๋๋hasError์ํ๋ฅผ ํ์ธํฉ๋๋ค. true์ด๋ฉด ํด๋ฐฑ UI(์ด ๊ฒฝ์ฐ ๊ฐ๋จํํ๊ทธ)๋ฅผ ๋ ๋๋งํฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ์ปดํฌ๋ํธ์ ์์(children)์ ๋ ๋๋งํฉ๋๋ค.
์ค๋ฅ ๊ฒฝ๊ณ ์ฌ์ฉํ๊ธฐ
์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋ณดํธํ๋ ค๋ ์ปดํฌ๋ํธ๋ ์ปดํฌ๋ํธ๋ค์ ErrorBoundary ์ปดํฌ๋ํธ๋ก ๊ฐ์ธ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค:
๋ง์ฝ ComponentThatMightThrow๊ฐ ์ค๋ฅ๋ฅผ ๋ฐ์์ํค๋ฉด, ErrorBoundary๊ฐ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ์ํ๋ฅผ ์
๋ฐ์ดํธํ ํ ํด๋ฐฑ UI๋ฅผ ๋ ๋๋งํฉ๋๋ค. ๋๋จธ์ง ์ ํ๋ฆฌ์ผ์ด์
์ ์ ์์ ์ผ๋ก ๊ณ์ ์๋ํฉ๋๋ค.
์ค๋ฅ ๊ฒฝ๊ณ ๋ฐฐ์น
์ค๋ฅ ๊ฒฝ๊ณ์ ๋ฐฐ์น๋ ํจ๊ณผ์ ์ธ ์ค๋ฅ ์ฒ๋ฆฌ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์ ์ ๋ต์ ๊ณ ๋ คํ์ธ์:
- ์ต์์ ์์ค ์ค๋ฅ ๊ฒฝ๊ณ: ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ์ ์ฒ๋ฆฌ๋์ง ์์ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ์์ ํ ์ ํ๋ฆฌ์ผ์ด์ ์ถฉ๋์ ๋ฐฉ์งํฉ๋๋ค. ์ด๋ ๊ธฐ๋ณธ์ ์ธ ์์ค์ ๋ณดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ธ๋ถํ๋ ์ค๋ฅ ๊ฒฝ๊ณ: ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์ปดํฌ๋ํธ๋ ์น์ ์ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ์ ์ค๋ฅ๋ฅผ ๊ฒฉ๋ฆฌํ๊ณ ๋ ๊ตฌ์ฒด์ ์ธ ํด๋ฐฑ UI๋ฅผ ์ ๊ณตํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ธ๋ถ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์ปดํฌ๋ํธ๋ฅผ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ ์ ์์ต๋๋ค.
- ํ์ด์ง ์์ค ์ค๋ฅ ๊ฒฝ๊ณ: ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ฒด ํ์ด์ง๋ ๋ผ์ฐํธ ์ฃผ๋ณ์ ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ๋ฐฐ์นํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. ์ด๋ ๊ฒ ํ๋ฉด ํ ํ์ด์ง์ ์ค๋ฅ๊ฐ ๋ค๋ฅธ ํ์ด์ง์ ์ํฅ์ ๋ฏธ์น๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
์์:
function App() {
return (
);
}
์ด ์์ ์์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ ์ฃผ์ ์น์ (Header, Sidebar, ContentArea, Footer)์ด ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ์ ธ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๊ฐ ์น์ ์ด ๋ ๋ฆฝ์ ์ผ๋ก ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ์ฌ ๋จ์ผ ์ค๋ฅ๊ฐ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํฅ์ ๋ฏธ์น๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
ํด๋ฐฑ UI ์ปค์คํฐ๋ง์ด์ง
์ค๋ฅ ๊ฒฝ๊ณ๊ฐ ํ์ํ๋ ํด๋ฐฑ UI๋ ์ ์ตํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ด์ด์ผ ํฉ๋๋ค. ๋ค์ ๊ฐ์ด๋๋ผ์ธ์ ๊ณ ๋ คํ์ธ์:
- ๋ช ํํ ์ค๋ฅ ๋ฉ์์ง ์ ๊ณต: ๋ฌด์์ด ์๋ชป๋์๋์ง ์ค๋ช ํ๋ ๊ฐ๊ฒฐํ๊ณ ์ ์ตํ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ์ธ์. ๊ธฐ์ ์ ์ธ ์ฉ์ด๋ ํผํ๊ณ ์ฌ์ฉ์๊ฐ ์ดํดํ๊ธฐ ์ฌ์ด ์ธ์ด๋ฅผ ์ฌ์ฉํ์ธ์.
- ํด๊ฒฐ์ฑ ์ ์: ์ฌ์ฉ์์๊ฒ ํ์ด์ง ์๋ก๊ณ ์นจ, ๋์ค์ ๋ค์ ์๋, ๋๋ ๊ณ ๊ฐ ์ง์ํ์ ๋ฌธ์์ ๊ฐ์ ๊ฐ๋ฅํ ํด๊ฒฐ์ฑ ์ ์ ์ํ์ธ์.
- ๋ธ๋๋ ์ผ๊ด์ฑ ์ ์ง: ํด๋ฐฑ UI๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ๋์์ธ ๋ฐ ๋ธ๋๋ฉ๊ณผ ์ผ์นํ๋๋ก ํ์ธ์. ์ด๋ ์ผ๊ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ์ค๋ฅ ๋ณด๊ณ ๋ฐฉ๋ฒ ์ ๊ณต: ์ฌ์ฉ์๊ฐ ํ์ ์ค๋ฅ๋ฅผ ๋ณด๊ณ ํ ์ ์๋ ๋ฒํผ์ด๋ ๋งํฌ๋ฅผ ํฌํจํ์ธ์. ์ด๋ ์ด์๋ฅผ ๋๋ฒ๊น ํ๊ณ ์์ ํ๋ ๋ฐ ๊ท์คํ ์ ๋ณด๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
์์:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// ๋ค์ ๋ ๋๋ง์์ ํด๋ฐฑ UI๋ฅผ ํ์ํ๋๋ก state๋ฅผ ์
๋ฐ์ดํธํฉ๋๋ค.
return { hasError: true };
}
componentDidCatch(error, info) {
// ์ค๋ฅ๋ฅผ ์ค๋ฅ ๋ณด๊ณ ์๋น์ค์ ๊ธฐ๋กํ ์๋ ์์ต๋๋ค.
console.error("์กํ ์ค๋ฅ: ", error, info.componentStack);
}
render() {
if (this.state.hasError) {
// ์ํ๋ ์ปค์คํ
ํด๋ฐฑ UI๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค.
return (
์ฃ์กํฉ๋๋ค! ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
์ด ์ฝํ
์ธ ๋ฅผ ํ์ํ๋ ์ค์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํ๊ฑฐ๋ ๋ฌธ์ ๊ฐ ์ง์๋๋ฉด ๊ณ ๊ฐ ์ง์ํ์ ๋ฌธ์ํด ์ฃผ์ธ์.
๊ณ ๊ฐ ์ง์ํ ๋ฌธ์
);
}
return this.props.children;
}
}
์ด ์์ ๋ ๋ช ํํ ์ค๋ฅ ๋ฉ์์ง, ์ ์๋ ํด๊ฒฐ์ฑ , ํ์ด์ง ์๋ก๊ณ ์นจ ๋ฐ ๊ณ ๊ฐ ์ง์ํ ๋ฌธ์ ๋งํฌ๋ฅผ ํฌํจํ๋ ๋ ์ ์ตํ ํด๋ฐฑ UI๋ฅผ ํ์ํฉ๋๋ค.
๋ค์ํ ์ ํ์ ์ค๋ฅ ์ฒ๋ฆฌํ๊ธฐ
์ค๋ฅ ๊ฒฝ๊ณ๋ ๋ ๋๋ง ์ค, ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋, ๊ทธ๋ฆฌ๊ณ ๊ทธ ์๋ ์ ์ฒด ํธ๋ฆฌ์ ์์ฑ์์์ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํฉ๋๋ค. ํ์ง๋ง ๋ค์ ์ค๋ฅ๋ ํฌ์ฐฉํ์ง *์์ต๋๋ค*:
- ์ด๋ฒคํธ ํธ๋ค๋ฌ
- ๋น๋๊ธฐ ์ฝ๋ (์:
setTimeout,requestAnimationFrame) - ์๋ฒ ์ฌ์ด๋ ๋ ๋๋ง
- ์ค๋ฅ ๊ฒฝ๊ณ ์์ฒด(์์์ด ์๋)์์ ๋ฐ์ํ ์ค๋ฅ
์ด๋ฌํ ์ ํ์ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ค๋ฉด ๋ค๋ฅธ ๊ธฐ์ ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
์ด๋ฒคํธ ํธ๋ค๋ฌ
์ด๋ฒคํธ ํธ๋ค๋ฌ์์ ๋ฐ์ํ๋ ์ค๋ฅ์ ๊ฒฝ์ฐ, ํ์ค try...catch ๋ธ๋ก์ ์ฌ์ฉํ์ธ์:
function MyComponent() {
const handleClick = () => {
try {
// ์ค๋ฅ๋ฅผ ๋ฐ์์ํฌ ์ ์๋ ์ฝ๋
throw new Error("์ด๋ฒคํธ ํธ๋ค๋ฌ์์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.");
} catch (error) {
console.error("์ด๋ฒคํธ ํธ๋ค๋ฌ ์ค๋ฅ: ", error);
// ์ค๋ฅ ์ฒ๋ฆฌ (์: ์ค๋ฅ ๋ฉ์์ง ํ์)
alert("์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ๋ค์ ์๋ํด ์ฃผ์ธ์.");
}
};
return ;
}
๋น๋๊ธฐ ์ฝ๋
๋น๋๊ธฐ ์ฝ๋์์ ๋ฐ์ํ๋ ์ค๋ฅ์ ๊ฒฝ์ฐ, ๋น๋๊ธฐ ํจ์ ๋ด์์ try...catch ๋ธ๋ก์ ์ฌ์ฉํ์ธ์:
function MyComponent() {
useEffect(() => {
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
// ๋ฐ์ดํฐ ์ฒ๋ฆฌ
console.log(data);
} catch (error) {
console.error("๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ค๋ฅ: ", error);
// ์ค๋ฅ ์ฒ๋ฆฌ (์: ์ค๋ฅ ๋ฉ์์ง ํ์)
alert("๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐ ์คํจํ์ต๋๋ค. ๋์ค์ ๋ค์ ์๋ํด ์ฃผ์ธ์.");
}
}
fetchData();
}, []);
return ๋ฐ์ดํฐ ๋ก๋ฉ ์ค...;
}
๋๋, ์ฒ๋ฆฌ๋์ง ์์ ํ๋ก๋ฏธ์ค ๊ฑฐ๋ถ(unhandled promise rejections)์ ๋ํด ์ ์ญ ์ค๋ฅ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ ์ฌ์ฉํ ์ ์์ต๋๋ค:
window.addEventListener('unhandledrejection', function(event) {
console.error('์ฒ๋ฆฌ๋์ง ์์ ๊ฑฐ๋ถ (ํ๋ก๋ฏธ์ค: ', event.promise, ', ์ด์ : ', event.reason, ');');
// ์ ํ์ ์ผ๋ก ์ ์ญ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ๊ฑฐ๋ ์ค๋ฅ๋ฅผ ์๋น์ค์ ๊ธฐ๋กํฉ๋๋ค.
alert("์๊ธฐ์น ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค. ๋์ค์ ๋ค์ ์๋ํด ์ฃผ์ธ์.");
});
๊ณ ๊ธ ์ค๋ฅ ๊ฒฝ๊ณ ๊ธฐ์
์ค๋ฅ ๊ฒฝ๊ณ ์ฌ์ค์
๊ฒฝ์ฐ์ ๋ฐ๋ผ ์ฌ์ฉ์๊ฐ ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ค์ ํ๊ณ ์ค๋ฅ๋ฅผ ์ผ์ผํจ ์์ ์ ๋ค์ ์๋ํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๊ณ ์ถ์ ์ ์์ต๋๋ค. ์ด๋ ๋คํธ์ํฌ ๋ฌธ์ ์ ๊ฐ์ ์ผ์์ ์ธ ๋ฌธ์ ๋ก ์ธํด ์ค๋ฅ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ์ ์ ์ฉํ ์ ์์ต๋๋ค.
์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ค์ ํ๋ ค๋ฉด Redux๋ Context์ ๊ฐ์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ค๋ฅ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ ์ฌ์ค์ ๊ธฐ๋ฅ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ๋๋ ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ๊ฐ์ ๋ก ๋ค์ ๋ง์ดํธํ๋ ๋ ๊ฐ๋จํ ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค.
์์ (๊ฐ์ ์ฌ๋ง์ดํธ):
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, errorCount: 0, key: 0 };
}
static getDerivedStateFromError(error) {
// ๋ค์ ๋ ๋๋ง์์ ํด๋ฐฑ UI๋ฅผ ํ์ํ๋๋ก state๋ฅผ ์
๋ฐ์ดํธํฉ๋๋ค.
return { hasError: true };
}
componentDidCatch(error, info) {
// ์ค๋ฅ๋ฅผ ์ค๋ฅ ๋ณด๊ณ ์๋น์ค์ ๊ธฐ๋กํ ์๋ ์์ต๋๋ค.
console.error("์กํ ์ค๋ฅ: ", error, info.componentStack);
this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
}
resetError = () => {
this.setState({hasError: false, key: this.state.key + 1})
}
render() {
if (this.state.hasError) {
// ์ํ๋ ์ปค์คํ
ํด๋ฐฑ UI๋ฅผ ๋ ๋๋งํ ์ ์์ต๋๋ค.
return (
์ฃ์กํฉ๋๋ค! ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
์ด ์ฝํ
์ธ ๋ฅผ ํ์ํ๋ ์ค์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
);
}
return {this.props.children};
}
}
์ด ์์ ์์๋ ๊ฐ์ธ๋ div์ 'key'๊ฐ ์ถ๊ฐ๋ฉ๋๋ค. key๋ฅผ ๋ณ๊ฒฝํ๋ฉด ์ปดํฌ๋ํธ๊ฐ ๊ฐ์ ๋ก ๋ค์ ๋ง์ดํธ๋์ด ์ค๋ฅ ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ง์๋๋ค. `resetError` ๋ฉ์๋๋ ์ปดํฌ๋ํธ์ `key` ์ํ๋ฅผ ์ ๋ฐ์ดํธํ์ฌ ์ปดํฌ๋ํธ๊ฐ ๋ค์ ๋ง์ดํธ๋๊ณ ์์์ ๋ค์ ๋ ๋๋งํ๋๋ก ํฉ๋๋ค.
Suspense์ ํจ๊ป ์ค๋ฅ ๊ฒฝ๊ณ ์ฌ์ฉํ๊ธฐ
React Suspense๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ค ์กฐ๊ฑด์ด ์ถฉ์กฑ๋ ๋๊น์ง(์: ๋ฐ์ดํฐ๊ฐ ๋ก๋๋ ๋๊น์ง) ์ปดํฌ๋ํธ ๋ ๋๋ง์ '์ผ์ ์ค๋จ'ํ ์ ์์ต๋๋ค. ์ค๋ฅ ๊ฒฝ๊ณ์ Suspense๋ฅผ ๊ฒฐํฉํ์ฌ ๋น๋๊ธฐ ์์ ์ ๋ํ ๋ ๊ฐ๋ ฅํ ์ค๋ฅ ์ฒ๋ฆฌ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
import React, { Suspense } from 'react';
function MyComponent() {
return (
๋ก๋ฉ ์ค... ์ด ์์ ์์ `DataFetchingComponent`๋ ์ปค์คํ ํ ์ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ต๋๋ค. `Suspense` ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๊ฐ ๋ก๋๋๋ ๋์ ๋ก๋ฉ ํ์๊ธฐ๋ฅผ ๋ณด์ฌ์ค๋๋ค. ๋ฐ์ดํฐ ๋ก๋ฉ ๊ณผ์ ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ฉด `ErrorBoundary`๊ฐ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ํด๋ฐฑ UI๋ฅผ ํ์ํฉ๋๋ค.
React ์ค๋ฅ ๊ฒฝ๊ณ ๋ชจ๋ฒ ์ฌ๋ก
- ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ์ง ๋ง์ธ์: ์ค๋ฅ ๊ฒฝ๊ณ๋ ๊ฐ๋ ฅํ์ง๋ง, ๋ชจ๋ ๋จ์ผ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ๋ ๊ฒ์ ํผํ์ธ์. ์ธ๋ถ API์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ์ปดํฌ๋ํธ๋ ์ฌ์ฉ์ ์ ๋ ฅ์ ์์กดํ๋ ์ปดํฌ๋ํธ์ ๊ฐ์ด ์ค๋ฅ๋ฅผ ๋ฐ์์ํฌ ๊ฐ๋ฅ์ฑ์ด ๋ ๋์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ธ๋ ๋ฐ ์ง์คํ์ธ์.
- ์ค๋ฅ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ธฐ๋กํ์ธ์:
componentDidCatch๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ค๋ฅ ๋ณด๊ณ ์๋น์ค๋ ์๋ฒ ์ฌ์ด๋ ๋ก๊ทธ์ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ์ธ์. ์ปดํฌ๋ํธ ์คํ ๋ฐ ์ฌ์ฉ์ ์ธ์ ๊ณผ ๊ฐ์ด ์ค๋ฅ์ ๋ํ ๊ฐ๋ฅํ ๋ง์ ์ ๋ณด๋ฅผ ํฌํจํ์ธ์. - ์ ์ตํ ํด๋ฐฑ UI๋ฅผ ์ ๊ณตํ์ธ์: ํด๋ฐฑ UI๋ ์ ์ตํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ด์ด์ผ ํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ๋ ๊ฒ์ ํผํ๊ณ ์ฌ์ฉ์์๊ฒ ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ํ ์ ์ฉํ ์ ์์ ์ ๊ณตํ์ธ์.
- ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ํ ์คํธํ์ธ์: ์ค๋ฅ ๊ฒฝ๊ณ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ํ ์คํธ๋ฅผ ์์ฑํ์ธ์. ์ปดํฌ๋ํธ์์ ์ค๋ฅ๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๊ณ ์ค๋ฅ ๊ฒฝ๊ณ๊ฐ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ์ฌ ์ฌ๋ฐ๋ฅธ ํด๋ฐฑ UI๋ฅผ ํ์ํ๋์ง ํ์ธํ์ธ์.
- ์๋ฒ ์ฌ์ด๋ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ๊ณ ๋ คํ์ธ์: ์ค๋ฅ ๊ฒฝ๊ณ๋ ์ฃผ๋ก ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์ค๋ฅ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ ๋๋ง๋๊ธฐ ์ ์ ๋ฐ์ํ๋ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ธฐ ์ํด ์๋ฒ ์ฌ์ด๋์์๋ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ๊ตฌํํด์ผ ํฉ๋๋ค.
์ค์ ์์
๋ค์์ ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ์ค์ ์์ ์ ๋๋ค:
- ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ: ์ ํ ๋ชฉ๋ก ์ปดํฌ๋ํธ๋ฅผ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ์ ์ค๋ฅ๊ฐ ์ ์ฒด ํ์ด์ง๋ฅผ ๋ค์ด์ํค๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. ๋์ฒด ์ํ์ ์ ์ํ๋ ํด๋ฐฑ UI๋ฅผ ํ์ํฉ๋๋ค.
- ์์ ๋ฏธ๋์ด ํ๋ซํผ: ์ฌ์ฉ์ ํ๋กํ ์ปดํฌ๋ํธ๋ฅผ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ์ ์ค๋ฅ๊ฐ ๋ค๋ฅธ ์ฌ์ฉ์์ ํ๋กํ์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ก ํฉ๋๋ค. ํ๋กํ์ ๋ก๋ํ ์ ์์์ ๋ํ๋ด๋ ํด๋ฐฑ UI๋ฅผ ํ์ํฉ๋๋ค.
- ๋ฐ์ดํฐ ์๊ฐํ ๋์๋ณด๋: ์ฐจํธ ์ปดํฌ๋ํธ๋ฅผ ์ค๋ฅ ๊ฒฝ๊ณ๋ก ๊ฐ์ธ์ ์ค๋ฅ๊ฐ ์ ์ฒด ๋์๋ณด๋๋ฅผ ๋ค์ด์ํค๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. ์ฐจํธ๋ฅผ ๋ ๋๋งํ ์ ์์์ ๋ํ๋ด๋ ํด๋ฐฑ UI๋ฅผ ํ์ํฉ๋๋ค.
- ๋ค๊ตญ์ด ์ ํ๋ฆฌ์ผ์ด์ : ์ง์ญํ๋ ๋ฌธ์์ด์ด๋ ๋ฆฌ์์ค๊ฐ ๋๋ฝ๋ ์ํฉ์ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ๋ณธ ์ธ์ด๋ ์ฌ์ฉ์ ์นํ์ ์ธ ์ค๋ฅ ๋ฉ์์ง๋ก ์ฐ์ํ๊ฒ ๋์ฒดํฉ๋๋ค.
์ค๋ฅ ๊ฒฝ๊ณ์ ๋์
์ค๋ฅ ๊ฒฝ๊ณ๊ฐ React์์ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ถ์ฅ ๋ฐฉ๋ฒ์ด์ง๋ง, ๊ณ ๋ คํ ์ ์๋ ๋ช ๊ฐ์ง ๋์์ ์ธ ์ ๊ทผ ๋ฐฉ์์ด ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด๋ฌํ ๋์์ ์ ํ๋ฆฌ์ผ์ด์ ์ถฉ๋์ ๋ฐฉ์งํ๊ณ ์ํํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ์ค๋ฅ ๊ฒฝ๊ณ๋งํผ ํจ๊ณผ์ ์ด์ง ์์ ์ ์๋ค๋ ์ ์ ๋ช ์ฌํ์ธ์.
- Try-Catch ๋ธ๋ก: ์ฝ๋ ์น์ ์ try-catch ๋ธ๋ก์ผ๋ก ๊ฐ์ธ๋ ๊ฒ์ ์ค๋ฅ ์ฒ๋ฆฌ์ ๊ธฐ๋ณธ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค. ์ด๋ฅผ ํตํด ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ์์ธ๊ฐ ๋ฐ์ํ๋ฉด ๋์ฒด ์ฝ๋๋ฅผ ์คํํ ์ ์์ต๋๋ค. ํน์ ์ ์ฌ์ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ์ ์ฉํ์ง๋ง, ์ปดํฌ๋ํธ ๋ง์ดํธ ํด์ ๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ถฉ๋์ ๋ฐฉ์งํ์ง๋ ๋ชปํฉ๋๋ค.
- ์ปค์คํ ์ค๋ฅ ์ฒ๋ฆฌ ์ปดํฌ๋ํธ: ์ํ ๊ด๋ฆฌ์ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ์ฌ์ฉํ์ฌ ์์ ๋ง์ ์ค๋ฅ ์ฒ๋ฆฌ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ ๋ง์ ์๋ ์์ ์ด ํ์ํ๋ฉฐ ๋ด์ฅ๋ React ์ค๋ฅ ์ฒ๋ฆฌ ๋ฉ์ปค๋์ฆ์ ํ์ฉํ์ง ์์ต๋๋ค.
- ์ ์ญ ์ค๋ฅ ์ฒ๋ฆฌ: ์ ์ญ ์ค๋ฅ ํธ๋ค๋ฌ๋ฅผ ์ค์ ํ๋ฉด ์ฒ๋ฆฌ๋์ง ์์ ์์ธ๋ฅผ ํฌ์ฐฉํ๊ณ ๊ธฐ๋กํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ค๋ฅ๋ก ์ธํด ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ํด์ ๋๊ฑฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ถฉ๋ํ๋ ๊ฒ์ ๋ง์ง๋ ๋ชปํฉ๋๋ค.
๊ถ๊ทน์ ์ผ๋ก ์ค๋ฅ ๊ฒฝ๊ณ๋ React์์ ์ค๋ฅ ์ฒ๋ฆฌ์ ๋ํ ๊ฐ๋ ฅํ๊ณ ํ์คํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ๋ฏ๋ก ๋๋ถ๋ถ์ ์ฌ์ฉ ์ฌ๋ก์์ ์ ํธ๋๋ ์ ํ์ ๋๋ค.
๊ฒฐ๋ก
React ์ค๋ฅ ๊ฒฝ๊ณ๋ ๊ฐ๋ ฅํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ํ์์ ์ธ ๋๊ตฌ์ ๋๋ค. ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ํด๋ฐฑ UI๋ฅผ ํ์ํจ์ผ๋ก์จ ์ ํ๋ฆฌ์ผ์ด์ ์ถฉ๋์ ๋ฐฉ์งํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ฉฐ ์ค๋ฅ ๋๋ฒ๊น ์ ๋จ์ํํฉ๋๋ค. ์ด ๊ฐ์ด๋์ ์ค๋ช ๋ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๋ฅ ๊ฒฝ๊ณ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ตฌํํ๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ํ๋ ฅ์ ์ด๊ณ ์ ๋ขฐํ ์ ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.